<template>
  <div class="footer">
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#666">
      <van-tabbar-item v-for="(item,index) in listArr" :key="index" :to="item.path">
        <van-icon class="iconfont" :class="item.icon" size='20'></van-icon>
        <div>{{item.text}}</div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// 引入需要的图标
import '../assets/fontIcon/iconfont.css'
import Vue from 'vue'
import { Tabbar, TabbarItem, Icon } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Icon)
export default {
  data () {
    return {
      active: 0,
      listArr: [
        { path: '/', text: '首页', icon: 'icon-shouye' },
        { path: '/classify', text: '分类', icon: 'icon-iconset0497' },
        { path: '/buying', text: '值得买', icon: 'icon-tupian' },
        { path: '/shopping', text: '购物车', icon: 'icon-gouwuche' },
        { path: '/user', text: '个人', icon: 'icon-renwu' }
      ]
    }
  },
  created () {
    // 解决刷新路由问题
    console.log(this.$route.path)
    this.listArr.forEach(el => {
      // 遍历listArr判断当前路由对应index
      if (el.path === this.$route.path) {
        this.active = this.listArr.indexOf(el)
      }
    })
  }
}
</script>

<style lang='less' scoped>
.van-tabbar{
  border-top: 0.005rem solid #ccc;
}
.van-tabbar-item{
  text-align: center;
  div{
    margin-top: 5px;
  }
}
</style>
